<template>
  <div class="administratorEdit">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="用户名:">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="密码:">
        <el-input v-model="form.password" type="password" />
      </el-form-item>

      <el-form-item label="真实姓名:">
        <el-input v-model="form.realName" />
      </el-form-item>

      <el-form-item label="年龄:">
        <el-input v-model="form.age" type="number" />
      </el-form-item>

      <el-form-item label="性别:">
        <el-select v-model="form.sex" placeholder="性别">
          <el-option label="男" value="1" />
          <el-option label="女" value="0" />
        </el-select>
      </el-form-item>

      <el-form-item label="出生日期:">
        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" size="default" />
      </el-form-item>

      <el-form-item label="手机:">
        <el-input v-model="form.phone" />
      </el-form-item>


      <el-form-item label="状态:">
        <el-select v-model="form.state" placeholder="状态">
          <el-option label="启用" value="1" />
          <el-option label="禁用" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="   ">
        <el-button type="primary" @click="onSubmit">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
const form = reactive({
  name: '',
  password: '',
  realName: '',
  age: '',
  sex: '',
  birthday: "",
  phone: '',
  grade: "",
  state: "启用"
});

const onSubmit = () => {
  console.log('submit!')
}

const resetForm = () => {
  form.name = '';
  form.password = '';
  form.realName = '';
  form.age = '';
  form.sex = '';
  form.birthday = "";
  form.phone = '';
  form.state = "启用";
};
</script>

<style scoped lang="scss">
.administratorEdit {
  padding: 20px 40px;
}
</style>
